<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	const videoInfo = ref({
		currentTime: 0,
		duration: 0
	})
	const progressStyle = ref('0%')
	const onPlay = (param) => {
		console.log((param))
	}
	const onPause = () => { }
	const onEnded = () => { }

	let maxDuration = 1;
	const onTimeUpdate = (event) => {
		// #ifdef APP
		videoInfo.value = {
			currentTime: event,
			duration: maxDuration
		}
		progressStyle.value = `${videoInfo.value.currentTime / videoInfo.value.duration * 100}%`
		// #endif
		// #ifndef APP
		const { currentTime, duration } = event.detail
		videoInfo.value = {
			currentTime,
			duration
		}
		progressStyle.value = `${videoInfo.value.currentTime / videoInfo.value.duration * 100}%`
		// #endif
	}
	const onDurationchange = (duration : number) => {
		maxDuration = duration
	}
	const onError = () => { }
	defineProps({
		videoUrl: {
			type: String,
			required: true
		},
		videoId: {
			type: String,
			required: true
		}
	})

	// #ifdef APP
	const domVideoPlayer = ref(null)
	const playDomVideoPlayer = () => {
		domVideoPlayer.value.play()
	}
	const pauseDomVideoPlayer = () => {
		domVideoPlayer.value.pause()
	}
	const seek2Duration = (sec : number) => {
		domVideoPlayer.value.toSeek(sec)
	}
	defineExpose({
		playDomVideoPlayer,
		pauseDomVideoPlayer
	})
	// #endif

	// 左右滑动
	const nowSec = ref(0)
	const delta = ref(0)
	const lastClientX = ref(0)
	const touchStartTime = ref(0)
	const touchMoveTime = ref(0)
	const showVideoProgress = ref(false)
	const onTouchStart = (e) => {
		delta.value = 0
		lastClientX.value = e["changedTouches"][0]["clientX"]
		touchStartTime.value = videoInfo.value.currentTime
	}
	const onTouchMove = (e) => {
		let temp = e["changedTouches"][0]["clientX"]
		delta.value += (temp - lastClientX.value)
		// console.log(temp - lastClientX.value, delta.value)
		lastClientX.value = temp
		touchMoveTime.value = touchStartTime.value + delta.value / (250 / videoInfo.value.duration)
		if (touchMoveTime.value < 0) {
			touchMoveTime.value = 0
		}
		if (touchMoveTime.value > videoInfo.value.duration) {
			touchMoveTime.value = videoInfo.value.duration
		}
		showVideoProgress.value = true
	}
	const onTouchEnd = (e) => {
		videoInfo.value.currentTime = touchMoveTime.value
		seek2Duration(videoInfo.value.currentTime)
		showVideoProgress.value = false
	}

	import { formatTime } from '@/utils/util'
</script>
<template>
	<view class="video-container">
		<!-- #ifdef APP -->
		<DomVideoPlayer @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" :src="videoUrl"
			class="video" ref="domVideoPlayer" :autoplay="false" loop :controls="false" @timeupdate="onTimeUpdate"
			@durationchange="onDurationchange">
		</DomVideoPlayer>
		<view class="video-progress" v-if="showVideoProgress">{{formatTime(touchMoveTime)}} /
			{{formatTime(videoInfo.duration)}}</view>
		<!-- #endif -->
		<!-- #ifndef APP -->
		<video @play="onPlay" @pause="onPause" @ended="onEnded" @timeupdate="onTimeUpdate" @error="onError"
			:src="videoUrl" loop :controls="false" :page-gesture="false" class="video" :id="videoId"></video>
		<!-- #endif -->
		<view class="progress-container">
			<view class="now-progress" :style="{width: progressStyle}"></view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.video-container {
		height: 100%;
		width: 100%;
		position: relative;

		.video-progress {
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.6);
			color: white;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			border-radius: 10rpx;
		}

		.video {
			height: 100%;
			width: 100%;
			position: absolute;
			z-index: 0;
			background-color: black;
		}

		.progress-container {
			height: 0.25%;
			background-color: rgba(255, 255, 255, 0.3);
			position: absolute;
			bottom: 10rpx;
			left: 30rpx;
			right: 30rpx;
			margin: auto;
			border-radius: 20rpx;

			.now-progress {
				height: 100%;
				background-color: rgba(255, 255, 255, 0.6);
			}
		}
	}
</style>